<template>
  <div class="Main">
    <AsideIcon @changedrawer="changeDrawer" />
      <transition name="fade-transform" mode="out-in">
        <router-view :key="$route.path" />
      </transition>
    <el-drawer direction='ltr' :visible.sync="drawer" :with-header="false">
      <Aside @changedrawer="changeDrawer" />
    </el-drawer>
  </div>
</template>

<script>
import AsideIcon from '@/components/AsideIcon';
import Aside from "./Aside/Aside";
import { mapState } from "vuex";

export default {
  data(){
    return {
      drawer:false
    }
  },
  components: {
    AsideIcon,
    Aside
  },
  computed: {
    ...mapState({
      isCollapse: (state) => state.isCollapse, //左边导航栏是否收起
    }),
  },
  methods:{
    changeDrawer(){
      // !this.drawer && this.$store.commit('upAside', false)
      if(this.drawer == false) {
        
        this.$nextTick(()=>{
          this.drawer = !this.drawer
          this.$store.commit('upAside', false)
        })
        return
      }
      this.drawer = !this.drawer
    }
  }
};
</script>

<style lang="scss" scoped>
.Main {
  height: 100%;
  // overflow-x: hidden;
  text-align: center;
  .AsideIcon {
    display: none;
    border: 1px solid #999;
    position: absolute;
    left: 0;
    top: 60px;
    z-index: 99;
    border-left: none;
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px;
    background-color: rgba($color: #fff, $alpha: .3);
  }
}
</style>
<style>
.Main .el-scrollbar {
  height: 100%;
}
.Main .scrollbar-wrapper {
  overflow-x: hidden;
}
</style>
<style lang="scss">
@import '@/styles/index.scss';
.Main .el-drawer{
  width: auto !important;
  padding-top: 50px;
  background-color: $vt_a;
}
// 重新覆盖原来的样式，原来的样式是.el-drawer获取焦点时的outline
.el-drawer:focus {
    outline: none;
}
</style>